import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Stack固定两端'),
        ),
        body: const Column(
          children: [
            HomePage(),
            stackItem(),
            stackPos(),
          ],
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取设备的宽度和高度，必须写在build里面
    final size = MediaQuery.of(context).size;

    return Container(
      width: size.width,
      height: 300,
      color: Colors.red,
      child: const Align(
        alignment: Alignment(-1, 0),
        child: Text("123456"),
      ),
    );
  }
}

class stackItem extends StatelessWidget {
  const stackItem({super.key});

  @override
  Widget build(BuildContext context) {
    return const Stack(
      children: [
        Align(
          alignment: Alignment.topLeft,
          child: Text("收藏"),
        ),
        Align(
          alignment: Alignment.topRight,
          child: Text("购买"),
        ),
      ],
    );
  }
}

class stackPos extends StatelessWidget {
  const stackPos({super.key});

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        SizedBox(height: 20,),
        SizedBox(
          width: double.infinity,
          height: 40,
          child: Stack(
            children: [
              Align(
                alignment: Alignment.topLeft,
                child: Text("收藏"),
              ),
              Align(
                alignment: Alignment.topRight,
                child: Text("购买"),
              ),
            ],
          ),
        ),
        SizedBox(
          width: double.infinity,
          height: 40,
          child: Stack(
            children: [
              Positioned(
                left: 10,
                child: Text("收藏"),
              ),
              Positioned(
                right: 10,
                child: Text("购买"),
              ),
            ],
          ),
        )
      ],
    );
  }
}

